<template>
    <el-drawer :with-header="true" custom-class="custom-title-height" v-model="drawer" :close-on-click-modal="false"
        title="看板全局配置" :direction="'rtl'">
        <el-scrollbar>
            <el-collapse v-model="activeNames" accordion>
                <el-collapse-item title="Consistency" name="1">
                    <template #title>
                        <div style="display: flex; justify-content: space-between; width: 100%;">
                            <div><el-tag type="primary">全局配置</el-tag> </div>
                            <div style="padding-right: 10px; box-sizing: border-box">
                                <el-button size="small" type="danger" @click="previewEv" plain>预览</el-button>
                                <el-button size="small" type="danger" @click="saveEv" plain>保存</el-button>
                            </div>
                        </div>
                    </template>
                    <div>
                        <div class="itm">

                            <div class="itm-config">
                                <div class="left">背景颜色</div>
                                <div class="right"><el-color-picker v-model="data.backgroundColor" show-alpha /></div>
                            </div>
                            <div class="itm-config">
                                <div class="left">背景图片</div>
                                <div class="right">
                                    <!-- <el-input v-model="data.backgroundImages" style="width: 100%"
                            placeholder="Please input" clearable /> -->

                                    <el-input size="small" style="background-color: white;"
                                        v-model="data.backgroundImages" placeholder="背景图片" class="input-with-select">
                                        <template #append>
                                            <el-button size="small" @click="backgroundImageEv(type = 'c')"
                                                :icon="Search" />
                                        </template>
                                    </el-input>

                                </div>
                            </div>
                            <div class="itm-config">
                                <div class="left">看板名称</div>
                                <div class="right"> <el-input v-model="data.titleName" style="width: 100%"
                                        placeholder="Please input" clearable />
                                </div>
                            </div>
                            <div class="itm-config">
                                <div class="left">字体大小</div>
                                <div class="right"> <el-input-number v-model="data.titleFontSize" :min="0" step-strictly
                                        style="width: 100%" />
                                </div>
                            </div>
                            <div class="itm-config">
                                <div class="left">字体颜色</div>
                                <div class="right"> <el-color-picker v-model="data.titleFontColor" show-alpha />
                                </div>
                            </div>
                            <div class="itm-config">
                                <div class="left">左边logo</div>
                                <div class="right">
                                    <!-- <el-input v-model="data.titleLeftLogo" style="width: 100%"
                            placeholder="Please input" clearable /> -->
                                    <el-input size="small" style="background-color: white;" disabled
                                        v-model="data.titleLeftLogo" placeholder="左logo" class="input-with-select">
                                        <template #append>
                                            <el-button size="small" @click="backgroundImageEv(type = 'l')"
                                                :icon="Search" />
                                        </template>
                                    </el-input>
                                </div>
                            </div>
                            <div class="itm-config">
                                <div class="left">右边logo</div>
                                <div class="right">
                                    <!-- <el-input v-model="data.titleRightLogo" style="width: 100%"
                            placeholder="Please input" clearable /> -->
                                    <el-input size="small" style="background-color: white;" disabled
                                        v-model="data.titleRightLogo" placeholder="右logo" class="input-with-select">
                                        <template #append>
                                            <el-button size="small" @click="backgroundImageEv(type = 'l')"
                                                :icon="Search" />
                                        </template>
                                    </el-input>
                                </div>
                            </div>
                            <div class="itm-config">
                                <div class="left">左logo大小</div>
                                <div class="right"> <el-input-number v-model="data.titleLeftLogoWidth" :min="10"
                                        :max="100" step-strictly style="width: 100%" /></div>
                            </div>
                            <div class="itm-config">
                                <div class="left">右logo大小</div>
                                <div class="right"> <el-input-number v-model="data.titleRightLogoWidth" :min="10"
                                        :max="100" step-strictly style="width: 100%" /></div>
                            </div>
                            <div class="itm-config">
                                <div class="left">标题高度</div>
                                <div class="right"> <el-input-number v-model="data.titleHeight" :min="4" step-strictly
                                        style="width: 100%" /></div>
                            </div>
                            <div class="itm-config">
                                <div class="left">顶部高度</div>
                                <div class="right"> <el-input-number v-model="data.topHeight" :min="4" step-strictly
                                        style="width: 100%" />
                                </div>
                            </div>
                            <div class="itm-config">
                                <div class="left">装饰线高度</div>
                                <div class="right"> <el-input-number v-model="data.topLineHeight" :min="4" step-strictly
                                        style="width: 100%" />
                                </div>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>


            <el-collapse v-model="activeNames">
                <el-collapse-item title="Consistency" name="2">
                    <template #title>
                        <div style="display: flex; justify-content: space-between; width: 100%;">
                            <div><el-tag type="primary">顶部配置</el-tag> </div>
                            <div style="padding-right: 10px; box-sizing: border-box">
                                <el-button size="small" type="danger" @click="addEv('top')" plain>增加</el-button>
                            </div>
                        </div>
                    </template>
                    <div>
                        <div class="itm">

                            <VueDraggable v-model="data.topList" :animation="150">
                                <div style="height: 230px; display: flex; justify-content: center;align-items: center; box-sizing: border-box;"
                                    v-for="(itm, index) in data.topList" :index>
                                    <div><el-tag type="primary">模块{{ index + 1 }}</el-tag></div>
                                    <div>

                                        <div class="global-config-itm">
                                            <div>宽度占比</div>
                                            <div><el-input-number size="small" v-model="itm.flex" :min="1" :max="24"
                                                    step-strictly style="width: 150px" />
                                            </div>
                                        </div>
                                        <div class="global-config-itm">
                                            <div>展示方向</div>
                                            <div><el-select style="width: 150px" v-model="itm.direction"
                                                    placeholder="Select" size="small">
                                                    <el-option label="横向" value="row" />
                                                    <el-option label="纵向" value="column" />
                                                </el-select></div>
                                        </div>
                                        <div class="global-config-itm">
                                            <div>边框模板</div>
                                            <div><el-select style="width: 150px" v-model="itm.border"
                                                    placeholder="Select" size="small">
                                                    <el-option :label="key" :value="key"
                                                        v-for="(value, key) in chartBorderComponent" :key="key" />
                                                </el-select></div>
                                        </div>
                                        <div class="global-config-itm">
                                            <div>内容边距</div>
                                            <div><el-input-number size="small" v-model="itm.padding" :min="1"
                                                    step-strictly style="width: 150px" />
                                            </div>
                                        </div>


                                    </div>
                                    <div>
                                        <div class="global-config-itm">
                                            <div>边框颜色1</div>
                                            <div><el-color-picker v-model="itm.borderColor1" show-alpha />
                                            </div>
                                        </div>
                                        <div class="global-config-itm">
                                            <div>边框颜色2</div>
                                            <div><el-color-picker v-model="itm.borderColor2" show-alpha />
                                            </div>
                                        </div>
                                        <div class="global-config-itm">
                                            <div> <el-switch v-model="itm.show" :active-value="true"
                                                    :inactive-value="false"
                                                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                                                    active-text="显示" inactive-text="隐藏" /></div>


                                        </div>

                                        <div class="global-config-itm">

                                            <div> <el-button size="small" type="danger" plain
                                                    @click="deleteRowEv('top', index)">
                                                    删除
                                                </el-button></div>
                                        </div>

                                    </div>
                                </div>
                            </VueDraggable>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>

            <el-collapse v-model="activeNames">
                <el-collapse-item title="Consistency" name="3">
                    <template #title>
                        <div style="display: flex; justify-content: space-between; width: 100%;">
                            <div><el-tag type="primary">底部配置</el-tag> </div>
                            <div style="padding-right: 10px; box-sizing: border-box">
                                <el-button size="small" type="danger" @click="addEv('bottom')" plain>增加</el-button>
                            </div>
                        </div>
                    </template>
                    <div>
                        <div class="itm">

                            <VueDraggable v-model="data.bottomList" :animation="150">
                                <div style="height: 230px; display: flex; justify-content: center;align-items: center; box-sizing: border-box;"
                                    v-for="(itm, index) in data.bottomList" :index>
                                    <div> <el-tag type="primary">模块{{ index + 1 }}</el-tag></div>
                                    <div>

                                        <div class="global-config-itm">
                                            <div>宽度占比</div>
                                            <div><el-input-number size="small" v-model="itm.flex" :min="1" :max="24"
                                                    step-strictly style="width: 150px" />
                                            </div>
                                        </div>
                                        <div class="global-config-itm">
                                            <div>展示方向</div>
                                            <div><el-select style="width: 150px" v-model="itm.direction"
                                                    placeholder="Select" size="small">
                                                    <el-option label="横向" value="row" />
                                                    <el-option label="纵向" value="column" />
                                                </el-select></div>
                                        </div>
                                        <div class="global-config-itm">
                                            <div>边框模板</div>
                                            <div><el-select style="width: 150px" v-model="itm.border"
                                                    placeholder="Select" size="small">
                                                    <el-option :label="key" :value="key"
                                                        v-for="(value, key) in chartBorderComponent" :key="key" />
                                                </el-select></div>
                                        </div>
                                        <div class="global-config-itm">
                                            <div>内容边距</div>
                                            <div><el-input-number size="small" v-model="itm.padding" :min="1"
                                                    step-strictly style="width: 150px" />
                                            </div>
                                        </div>


                                    </div>
                                    <div>
                                        <div class="global-config-itm">
                                            <div>边框颜色1</div>
                                            <div><el-color-picker v-model="itm.borderColor1" show-alpha />
                                            </div>
                                        </div>
                                        <div class="global-config-itm">
                                            <div>边框颜色2</div>
                                            <div><el-color-picker v-model="itm.borderColor2" show-alpha />
                                            </div>
                                        </div>
                                        <div class="global-config-itm">
                                            <div> <el-switch v-model="itm.show" :active-value="true"
                                                    :inactive-value="false"
                                                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                                                    active-text="显示" inactive-text="隐藏" /></div>


                                        </div>

                                        <div class="global-config-itm">

                                            <div> <el-button size="small" type="danger" plain
                                                    @click="deleteRowEv('top', index)">
                                                    删除
                                                </el-button></div>
                                        </div>

                                    </div>
                                </div>
                            </VueDraggable>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>


            <el-dialog v-model="dialogVisible" :title="addType == 'top' ? '增加顶部模块' : '增加底部模块'" width="500"
                :before-close="handleClose" :close-on-click-modal="false">
                <div><el-select v-model="addComponentName" placeholder="请选择组件模板" size="large" style="width: 100%">
                        <el-option v-for="(value, key) in chartComponentName" :key="key" :label="value" :value="key" />
                    </el-select></div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="addSuerButtonEv">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </el-scrollbar>
        <el-dialog v-model="dialogVisibleImage" title="模板选择" width="50%" :before-close="handleClose">
            <div style="height: 300px">
                <componentsFileList @dbRowBasicFile="dbRowBasicFile" />
            </div>
        </el-dialog>
    </el-drawer>
</template>

<script setup>
import {
    Search
} from '@element-plus/icons-vue'
import { ref, reactive, inject, onMounted, onActivated } from 'vue'
import { chartComponentName, chartComponentInitData } from '@/utils/chart.js'
import { VueDraggable } from "vue-draggable-plus"
import componentsFileList from '@/views/setting/basic/file/components/index.vue'
import { chartBorderComponent } from '@/utils/chart.js'
const drawer = ref(false)
const data = reactive({})
const dialogVisible = ref(false)
const dialogVisibleImage = ref(false)
const addType = ref('top')
const addComponentName = ref('')

const emit = defineEmits(['emitGetDataEv'])
const provideSaveEv = inject('provideSaveEv');
const imageType = ref(null)
const activeNames = ref(['1'])

onMounted(() => {

})
onActivated(() => {

})

const previewEv = () => {
    emit('emitGetDataEv', data)
}

const saveEv = async () => {
    console.log('保存修改方法')
    await emit('emitGetDataEv', data)
    await provideSaveEv()
}

const addEv = (val) => {
    addType.value = val
    dialogVisible.value = true
}

const handleClose = (done) => {
    done()
}

const addSuerButtonEv = () => {
    if (addComponentName.value == '') {
        ElMessage.error('请选择模板')
        return
    }
    console.log(addComponentName.value)
    let addData = {}
    addData.flex = 1
    addData.show = true
    addData.direction = 'row'
    addData.border = 'BorderBox12'
    addData.borderColor1 = "#6586ec"
    addData.borderColor2 = "#2CF7FE"
    addData.padding = 5
    addData.config = [chartComponentInitData[addComponentName.value]]
    if (addType.value == 'top') {
        // arr.splice(arr.length, 0, 4)
        data.topList.splice(data.topList.length, 0, addData)
    } else {
        data.bottomList.splice(data.bottomList.length, 0, addData)
    }
    dialogVisible.value = false
}

const deleteRowEv = async (type_z, index) => {
    const message = await ElMessageBox.confirm('确定删除此组件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning ',
        roundButton: true,
    }).catch((err) => err)
    if (message === 'confirm') {
        if (type_z == 'top') {
            // arr.splice(arr.length, 0, 4)
            data.topList.splice(index, 1)
        } else {
            data.bottomList.show = false
            data.bottomList.splice(index, 1)
        }
    }
}

const backgroundImageEv = (type_z) => {
    dialogVisibleImage.value = true
    imageType.value = type_z
}

const dbRowBasicFile = (val) => {
    console.log(val)
    if (imageType.value == 'c') {
        data.backgroundImages = val.id
    } else if (imageType.value == 'l') {
        data.titleLeftLogo = val.id
    } else {
        data.titleRightLogo = val.id
    }
    dialogVisibleImage.value = false
}

defineExpose({
    drawer,
    data
})

</script>

<style lang='less' scoped>
@left-width: 120px;

.itm {
    border: 1px solid #dcdfe6;
    padding: 2px;
    box-sizing: border-box;
}

.itm-config {
    display: flex;
    align-items: center;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #dcdfe6;
    box-sizing: border-box;

    .left {
        width: @left-width;
        text-align: right;
        padding-right: 5px;
        box-sizing: border-box;
    }

    .right {
        width: calc(100% - @left-width);
    }

}

.itm .itm-config:last-of-type {
    border-bottom: 0 solid #dcdfe6;
    box-sizing: border-box;
}

.global-config-itm {
    display: flex;
    align-items: center;
    height: 45px;
    padding: 5px;
    box-sizing: border-box;
}
</style>